<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { categoryPie } from '@/api/diancan/show'

const labelRight = {
  position: 'right'
};

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      /**categoryPie().then((response) => {
      const barData = response.data
      this.initChart(barData)
    })**/
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
    //initChart(barData) {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
    text: 'Bar Chart with Category by diancanValue'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 80,
    bottom: 30
  },
  xAxis: {
    type: 'value',
    position: 'top',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
    data: //barData
    [
      '汤类',
      '烤肉类',
      '面包类',
      '小吃类',
      '饮品类',
      '套餐类'
    ]
  },
  series: [
    {
      name: 'Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        formatter: '{b}'
      },
      data: [
        { value: 8000, label: labelRight },
        { value: 38000, label: labelRight },
        { value: 45700, label: labelRight },
        { value: 44000, label: labelRight },
        { value: 21060, label: labelRight },
        { value :35000, label: labelRight }
      ]
    }
  ]
      })
    }
  }
}
</script>
